//声明画布
var canvas1 = new fabric.Canvas('canvas1');
//绘制图形
var rect = new fabric.Rect({
    left: 100, //距离画布左侧的距离，单位是像素
    top: 50, //距离画布上边的距离
    width: 50, //方形的宽度
    height: 200 //方形的高度
});
rect.setGradient('fill', {
    x1: 0, //色标的位置
    y1: 0, //最上沿位置
    x2: 0,
    y2: rect.height, //最下沿位置
    //渐变的颜色，彩虹的效果
    colorStops: {
        0: "red",
        0.2: "orange",
        0.4: "yellow",
        0.6: "green",
        0.8: "blue",
        1: "purple"
    }
});
//添加图形
canvas1.add(rect);
//绘制不规则图形
var path = new fabric.Path('M 0 0 L 200 50 L 170 100 z');
path.set({ left: 120, top: 120, fill: 'red' });
canvas1.add(path);
//添加文字
var text = new fabric.Text('hello world', { left: 200, top: 50, fill: 'blue' });
canvas1.add(text);
//
var canvas2 = new fabric.Canvas('canvas2'); //声明画布
var imgEle2 = document.getElementById('img1'); //声明我们的图片
//设置图片在canvas中的位置和样子
imgEle2.onload = function () {
    var imgInstance = new fabric.Image(imgEle2, {
        left: 200,
        top: 10,
        width: 200,
        height: 400,
        angle: 30 //设置旋转
    });
    canvas2.add(imgInstance); //加入到 canvas中
}
//在js中插入图片
var canvas3 = new fabric.Canvas('canvas3');
fabric.Image.fromURL('imgs/lake1.jpg', function (oImg) {
    oImg.scale(0.25); //图片缩小10倍
    canvas3.add(oImg);
});